import React from "react";
import Title from "../components/Title";
import SDTable from "../dataManage/SDTable";
import api from "../../api";
import { render } from "@testing-library/react";
import { companyMap,companyMap2 } from "../components/common";
import { Button, Form, Modal, Input, Col, Row, Select, InputNumber, message } from "antd";
import useReducer from "src/hooks/useReducer";

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
export default function LxxxManage() {
  const formRef = React.useRef();
  const actionRef = React.useRef();
  const [form] = Form.useForm();
  const [sate, dispatch] = useReducer({
    visible: false, // 抽屉弹窗
    editId: "", // 编辑id
    title: "", // 抽屉标题
  });
  const { visible, editId, title } = sate;

  const columns = [

    {
      title: "路线名称",
      dataIndex: "name",
      width: 150,
      ellipsis: true,

    },
    {
      title: "车牌号",
      dataIndex: "licensePlate",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

    },


    {
      title: "公司名称",
      dataIndex: "companyId",
      width: 150,
      hideInSearch: true,

      ellipsis: true,
      render: (text, record) => {
        return companyMap[record.companyId];
      }
    },
    {
      title: "起始时间",
      dataIndex: "startTime",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

    },
    {
      title: "结束时间",
      dataIndex: "endTime",
      width: 150,
      ellipsis: true,
      hideInSearch: true,

    },
    {
      title: "站点",
      dataIndex: "stationName",
      width: 150,
      ellipsis: true,
      hideInSearch: true,
      render: (text, record) => {
        return record.stationName.join(",");
      }

    },
    {
      title: "操作",
      dataIndex: "action",
      key: "action",
      hideInSearch: true,

      width: 150,
      fixed: "right",
      render: (text, record) => (
          <div style={{ fontWeight: "bold" }}>
            {/* <a style={{ marginRight: 15 }} onClick={handleAdd}>新增</a> */}
            <a onClick={() => handleEdit(record)}>编辑</a>
          </div>
      ),
    }
  ];
  // 新增
  const handleAdd = () => {
    form.resetFields();
    dispatch({
      visible: true,
      editId: "",
      title: "新增",
    });
  };

  // 编辑
  const handleEdit = (record) => {
    form.setFieldsValue({
      ...record,
      companyId: companyMap[record.companyId],
    });
    dispatch({
      visible: true,
      editId: record.routeId,
      title: "编辑",
    });
  };

  //保存
  const save = () => {
    form.validateFields().then((values) => {
      const params = {
        ...values,

      }
      editId && (params.routeId = editId);

      // 如果是新增， 那么userCreate 就是设置当前时间

      params.companyId = companyMap2[params.companyId] || 0;
      // params.


      const remote = editId ? api.editXlxx : api.addXlxx;

      remote(params).then((res) => {
            if (res.success) {
              dispatch({ visible: false });
              actionRef.current.reload();
              message.success(res.message || "操作成功");
            }else {
              message.error(res.message || "操作失败");
            }
          }
      );
    });
  }
  return (
      <>
        <div style={{ padding: "0 100px" }}>
          <Title title={"路线管理"}></Title>
          <SDTable
              formRef={formRef}
              actionRef={actionRef}
              requestApi={api.xlxx}
              columns={columns}

              options={false}
              toolBarRender={() => [
                <Button type="primary" key="1" onClick={handleAdd}>
                  新增
                </Button>,
              ]}
          ></SDTable>
          <Modal
              visible={visible}
              title={`${title}车辆信息`}
              width={900}
              onCancel={() => dispatch({ visible: false })}
              footer={[
                <Button key="back" onClick={() => dispatch({ visible: false })}>
                  取消
                </Button>,
                <Button key="submit" type="primary" onClick={save}>
                  确定
                </Button>,
              ]}
          >
            <Form form={form}>
              <Form form={form} {...layout}>
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item
                        name="name"
                        label="路线名称"
                        rules={[
                          {
                            required: true,
                            message: "路线名称不能为空",
                          },
                        ]}
                    >
                      <Input />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                        name="busId"
                        label="车牌号"

                    >
                      <Select options={[
                        { label: "京A12345", value: 1},
                        { label: "沪B12345", value: 2},
                        { label: "粤C12345", value: 3},

                      ]}  />
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item
                        name="companyId"
                        label="公司名称"

                    >
                      <Input  />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                        name="startTime"
                        label="起始时间"

                    >
                      <Input allowClear />
                    </Form.Item>
                  </Col>
                </Row>
                <Row gutter={24}>
                  <Col span={12}>
                    <Form.Item
                        name="endTime"
                        label="结束时间"

                    >
                      <Input allowClear />
                    </Form.Item>
                  </Col>
                  <Col span={12}>
                    <Form.Item
                        name="stopsId"
                        label="站点"

                    >
                      <Input allowClear />
                    </Form.Item>
                  </Col>
                </Row>

              </Form>
            </Form>
          </Modal>
        </div>
      </>
  );
}
